<template>
    <div id="steptwo">
        <v-container>
            <v-btn  dark small color="indigo" @click="addVisa">
                <v-icon dark >
                    mdi-plus
                </v-icon>
            </v-btn>
            <v-row>
                <template v-for="(docker, n) in dockers">
                    <v-col cols="4" :key="n">
                        <v-card>
                            <v-card-actions color="indigo">
                                <v-spacer></v-spacer>
                                <v-btn icon @click="deleteVisa(n)">
                                    <v-icon>mdi-bookmark-remove</v-icon>
                                </v-btn>
                            </v-card-actions>
                            <v-card-text>
                                <v-text-field
                                        label="Docker Name"
                                        hide-details="auto"
                                        v-model.lazy="docker.name"
                                ></v-text-field>
                                <v-text-field
                                        label="containerPort"
                                        type="number"
                                        hide-details="auto"
                                        v-model.lazy="docker.ports[0].containerPort"
                                ></v-text-field>
                                <v-text-field
                                        label="hostPort"
                                        type="number"
                                        hide-details="auto"
                                        v-model.lazy="docker.ports[0].hostPort"
                                ></v-text-field>
                                <v-select
                                        :items="items"
                                        label="Image"
                                        v-model.lazy="docker.image"
                                ></v-select>
                            </v-card-text>
                        </v-card>
                    </v-col>
                </template>
            </v-row>
        </v-container>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import {validationMixin} from 'vuelidate'
import {required} from 'vuelidate/lib/validators'
export default {
    props: ['currentStep'],
    validations: {
        dockers: {
                required
        },
    },
    data(){
        return {
            dockers: [
//                {
//                name:'',
//                ports:[{
//                    containerPort: '',
//                    hostPort: '',
//                }],
//                image: '',
//                imagePullPolicy: "IfNotPresent",
//            }
            ],
            items: ['armv64/redis', 'armv64/memcached', 'armv64/nginx'],
        }
    },
    mounted() {
//        this.$emit('can-continue', {value: true})
    },
    methods: {
        ...mapActions(
            'deployment', ['create_dockers']
         ),
        addVisa() {
            this.dockers.push({
                name:'',
                ports:[{
                    containerPort: '',
                    hostPort: '',
                }],
                image: '',
                imagePullPolicy: "IfNotPresent",
            })
            this.$emit('can-continue', {value: true});
            console.log(JSON.stringify(this.dockers))
        },
        deleteVisa(id){
            this.dockers.splice(id,1);
//            console.log(JSON.stringify(this.dockers))
        }
    },
    watch: {
       dockers: {
           handler (newTitle) {
               this.create_dockers(newTitle)
           }, deep: true,
       }
    },
}
</script>

<style>
    #steptwo .container {
        min-height: 360px;
        max-height: 360px;
        overflow-y: scroll;
    }
</style>